<%@taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">

<title>Cập nhật thông tin dịch vụ - GH HOTEL</title>

<!-- Bootstrap core CSS -->
<link href='<c:url value="/resources/css/bootstrap.css"></c:url>' rel="stylesheet">

<!-- Add custom CSS here -->
<link href='<c:url value="/resources/css/sb-admin.css"></c:url>' rel="stylesheet">
<link rel="stylesheet" href='<c:url value="/resources/font-awesome/css/font-awesome.min.css"></c:url>'>
<link rel="stylesheet" type="text/css" href='<c:url value="/resources/css/jquery.datetimepicker.css"></c:url>'/>
</head>

<body>

	<div id="wrapper">

		<!-- Sidebar -->
		<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
			<!-- Brand and toggle get grouped for better mobile display -->
			<div class="navbar-header">
				<button type="button" class="navbar-toggle" data-toggle="collapse"
					data-target=".navbar-ex1-collapse">
					<span class="sr-only">Toggle navigation</span> <span
						class="icon-bar"></span> <span class="icon-bar"></span> <span
						class="icon-bar"></span>
				</button>
						<a class="navbar-brand" href="index.html">THAI NGUYEN HOTEL MANAGEMENT SYSTEM</a>
			</div>

			<!-- Collect the nav links, forms, and other content for toggling -->
			<div class="collapse navbar-collapse navbar-ex1-collapse">
				<ul class="nav navbar-nav side-nav">
					<li><a href="../dashboard"><i class="fa fa-dashboard"></i>
							Trang chính</a></li>
					<!--             <li><a href="charts.html"><i class="fa fa-bar-chart-o"></i> Charts</a></li> -->
					<li class="dropdown"><a href="#" class="dropdown-toggle"
						data-toggle="dropdown"><i class="fa fa-caret-square-o-down"></i>
							Cập nhật dữ liệu nhà nghỉ <b class="caret"></b></a>
						<ul class="dropdown-menu">
							<li><a href="../roommanager">Cập nhật thông tin phòng</a></li>
							<li><a href="../servicemanager">Cập nhật dịch vụ</a></li>
						</ul></li>
					<li class="active"><a href="../roomusing"><i class="fa fa-edit"></i> Quản lý
							phòng</a></li>
					<li><a href="../history"><i class="fa fa-desktop"></i> Lịch
							sử giao dịch</a></li>
					<li><a href="<c:url value="customer"></c:url>"><i class="fa fa-wrench"></i> Danh sách khách hàng</a></li>
				</ul>

				<ul class="nav navbar-nav navbar-right navbar-user">
					<li class="dropdown messages-dropdown"><a href="#"
						class="dropdown-toggle" data-toggle="dropdown"><i
							class="fa fa-envelope"></i> Messages <span class="badge">7</span>
							<b class="caret"></b></a>
						<ul class="dropdown-menu">
							<li class="dropdown-header">7 New Messages</li>
							<li class="message-preview"><a href="#"> <span
									class="avatar"><img src="http://placehold.it/50x50"></span>
									<span class="name">John Smith:</span> <span class="message">Hey
										there, I wanted to ask you something...</span> <span class="time"><i
										class="fa fa-clock-o"></i> 4:34 PM</span>
							</a></li>
							<li class="divider"></li>
							<li class="message-preview"><a href="#"> <span
									class="avatar"><img src="http://placehold.it/50x50"></span>
									<span class="name">John Smith:</span> <span class="message">Hey
										there, I wanted to ask you something...</span> <span class="time"><i
										class="fa fa-clock-o"></i> 4:34 PM</span>
							</a></li>
							<li class="divider"></li>
							<li class="message-preview"><a href="#"> <span
									class="avatar"><img src="http://placehold.it/50x50"></span>
									<span class="name">John Smith:</span> <span class="message">Hey
										there, I wanted to ask you something...</span> <span class="time"><i
										class="fa fa-clock-o"></i> 4:34 PM</span>
							</a></li>
							<li class="divider"></li>
							<li><a href="#">View Inbox <span class="badge">7</span></a></li>
						</ul></li>
					<li class="dropdown alerts-dropdown"><a href="#"
						class="dropdown-toggle" data-toggle="dropdown"><i
							class="fa fa-bell"></i> Alerts <span class="badge">3</span> <b
							class="caret"></b></a>
						<ul class="dropdown-menu">
							<li><a href="#">Default <span
									class="label label-default">Default</span></a></li>
							<li><a href="#">Primary <span
									class="label label-primary">Primary</span></a></li>
							<li><a href="#">Success <span
									class="label label-success">Success</span></a></li>
							<li><a href="#">Info <span class="label label-info">Info</span></a></li>
							<li><a href="#">Warning <span
									class="label label-warning">Warning</span></a></li>
							<li><a href="#">Danger <span class="label label-danger">Danger</span></a></li>
							<li class="divider"></li>
							<li><a href="#">View All</a></li>
						</ul></li>
					<li class="dropdown user-dropdown"><a href="#"
						class="dropdown-toggle" data-toggle="dropdown"><i
							class="fa fa-user"></i> John Smith <b class="caret"></b></a>
						<ul class="dropdown-menu">
							<li><a href="#"><i class="fa fa-user"></i> Profile</a></li>
							<li><a href="#"><i class="fa fa-envelope"></i> Inbox <span
									class="badge">7</span></a></li>
							<li><a href="#"><i class="fa fa-gear"></i> Settings</a></li>
							<li class="divider"></li>
							<li><a href="#"><i class="fa fa-power-off"></i> Log Out</a></li>
						</ul></li>
				</ul>
			</div>
			<!-- /.navbar-collapse -->
		</nav>

		<div id="page-wrapper">
			<div class="row">
				<div class="col-lg-12">
					<h1>
						Quản lý<small>Thuê phòng</small>
					</h1>
					<ol class="breadcrumb">
						<li><a href="../roomusing"><i class="fa fa-dashboard"></i>
								Danh sách phòng</a></li>
						<li class="active"><i class="fa fa-table"></i> Thông tin chi tiết </li>
					</ol>
				</div>
			</div>
			<div class="row">
				<div style="width: 50%; margin-left: 15px; float: left;">
					<c:url value="/roomusing/detail" var="detail"></c:url>
					<form:form method="POST" action="${detail}" commandName="allmodel">
						<label>Số CMND</label>
						<div class="input-group">
							<form:input path="roomUsingModel.customer_id" type="text"
								class="form-control"></form:input>
							<span class="input-group-btn">
								<button class="btn btn-primary" type="submit">Tìm kiếm</button>
							</span>
						</div>
						<p class="help-block">Example: 151916575</p>
						<label>Tên khách hàng</label>
						<form:input class="form-control"
							path="customerModel.customer_name"></form:input>
						<p class="help-block">Example: Cao Hoài Việt</p>
						<label>Địa chỉ</label>
						<form:input class="form-control"
							path="customerModel.customer_address"></form:input>
						<p class="help-block">Example: Quỳnh Phụ, Thái Bình</p>
						<label>Số điện thoại</label>
						<form:input class="form-control"
							path="customerModel.customer_phone"></form:input>
						<p class="help-block">Example: 01669689216</p>
						<!-- 						/form2 -->
						<label>Số người</label>
						<form:select multiple="room_floor" class="form-control"
							path="roomUsingModel.number">
							<form:option value="1" label="1" />
							<form:option value="2" label="2" />
							<form:option value="3" label="3" />
							<form:option value="4" label="4" />
							<form:option value="5" label="5" />
							<form:option value="6" label="6" />
							<form:option value="7" label="7" />
							<form:option value="8" label="8" />
							<form:option value="9" label="9" />
							<form:option value="10" label="10" />
						</form:select>
						<p>
							<br>
						</p>
						<label>Giờ vào</label>
						<form:input class="form-control2" path="roomUsingModel.in_date"></form:input>
						<p class="help-block">Example: 2014-04-30 20:00:00</p>
						<label>Giờ ra</label>
						<form:input class="form-control2" path="roomUsingModel.out_date"></form:input>
						<p class="help-block">Example: 2014-04-30 20:00:00</p>
						<form:input type="hidden" path="roomUsingModel.room_id"></form:input>
						<form:input type="hidden" path="customerModel.customer_id"></form:input>
						<div style="float: left;">
							<button type="submit" class="btn btn-primary">Lưu thông tin</button>
						</div>
						<c:if test="${isUsed == 1}">
						<div style="float: left;">
							<a style="margin-left: 10px;" href="pay/${room_id}"> <span
								class="btn btn-danger">Thanh toán phòng</span>
							</a>
						</div>
						</c:if>
					</form:form>
				</div>
				<c:if test="${isUsed == 1}">
				<div
					style="width: 45%; float: right; margin-right: 18px; margin-left: 15px;">
					<label>&nbsp;</label>
					<div class="panel panel-primary">
						<div class="panel-heading">
							<h3 class="panel-title">Danh sách dịch vụ sử dụng</h3>
						</div>
						<div class="table-responsive">
							<table
								class="table table-bordered table-hover table-striped tablesorter">
								<thead>
									<tr>
										<th>Tên dịch vụ<i class="fa fa-sort"></i></th>
										<th>Giá tiền<i class="fa fa-sort"></i></th>
										<th>Số lượng<i class="fa fa-sort"></i></th>
									</tr>
								</thead>
								<tbody>
									<c:forEach items="${serviceusinglist}" var="emp">
										<c:forEach items="${serviceList}" var="sl">
											<c:if test="${emp.service_id == sl.service_id}">
												<tr>
													<td>${sl.service_name}</td>
													<td>${sl.service_price}</td>
													<td>${emp.number}</td>
												</tr>
											</c:if>
										</c:forEach>
									</c:forEach>
								</tbody>
							</table>
						</div>
					</div>
<!-- 					test -->
					<nav class="navbar navbar-default">
						<div class="container-fluid">
							<!-- Collect the nav links, forms, and other content for toggling -->
							<div class="collapse navbar-collapse"
								id="bs-example-navbar-collapse-1">
								<c:url value ="/roomusing/addservice" var="addservice"></c:url>
								<form class="navbar-form navbar-left" method="POST" action="${addservice}" id="serviceusing">
									<div class="form-group2">
										<select class="form-control" name="service_id">
											<c:forEach items="${serviceList}" var="sl">
												<option value="${sl.service_id}">${sl.service_name}    [${sl.service_number}]</option>
											</c:forEach>
										</select>
									</div>
									<div class="form-group">
										<select class="form-control" name="number">
											<option>1</option>
											<option>2</option>
											<option>3</option>
											<option>4</option>
											<option>5</option>
										</select>
									</div>
									<input type="hidden" id="room_id" name="room_id" value="${id}"/>
									<button type="submit" class="btn  btn-primary2">Thêm</button>
								</form>
							</div>
							<!-- /.navbar-collapse -->
						</div>
						<!-- /.container-fluid -->
					</nav>
					<!-- 					test -->
				
				<c:if test="${errorMessage != null}">
					<p>${errorMessage}</p>
				</c:if>
				</div>
				</c:if>
				<!-- /.col-lg-6 -->
				</div>
			</div>
			<!-- /.row -->
			<!-- /.row -->

		</div>
		<!-- /#page-wrapper -->
	<!-- /#wrapper -->
</body>
<!-- JavaScript123 -->
<script src='<c:url value="/resources/js/jquery-1.10.2.js"></c:url>'></script>
<script src='<c:url value="/resources/js/bootstrap.js"></c:url>'></script>

<!-- Page Specific Plugins -->
<script src='<c:url value="/resources/js/tablesorter/jquery.tablesorter.js"></c:url>'></script>
<script src='<c:url value="/resources/js/tablesorter/tables.js"></c:url>'></script>
<script type="text/javascript" src='<c:url value="/resources/js/jquery.js"></c:url>'></script>
<script type="text/javascript" src='<c:url value="/resources/js/jquery.datetimepicker.js"></c:url>'></script>
<script type="text/javascript">
	$('#datetimepicker').datetimepicker().datetimepicker({
		value : '2015/04/15 05:03',
		step : 10
	});

	$('#datetimepicker_mask').datetimepicker({
		mask : '9999/19/39 29:59'
	});

	$('#datetimepicker1').datetimepicker({
		datepicker : false,
		format : 'H:i',
		step : 5
	});
	$('#datetimepicker2').datetimepicker({
		yearOffset : 222,
		lang : 'ch',
		timepicker : false,
		format : 'd/m/Y',
		formatDate : 'Y/m/d',
		minDate : '-1970/01/02', // yesterday is minimum date
		maxDate : '+1970/01/02' // and tommorow is maximum date calendar
	});
	$('#datetimepicker3').datetimepicker({
		inline : true
	});
	$('#datetimepicker4').datetimepicker();
	$('#open').click(function() {
		$('#datetimepicker4').datetimepicker('show');
	});
	$('#close').click(function() {
		$('#datetimepicker4').datetimepicker('hide');
	});
	$('#reset').click(function() {
		$('#datetimepicker4').datetimepicker('reset');
	});
	$('#datetimepicker5').datetimepicker(
			{
				datepicker : false,
				allowTimes : [ '12:00', '13:00', '15:00', '17:00', '17:05',
						'17:20', '19:00', '20:00' ]
			});
	$('#datetimepicker6').datetimepicker();
	$('#destroy').click(function() {
		if ($('#datetimepicker6').data('xdsoft_datetimepicker')) {
			$('#datetimepicker6').datetimepicker('destroy');
			this.value = 'create';
		} else {
			$('#datetimepicker6').datetimepicker();
			this.value = 'destroy';
		}
	});
	var logic = function(currentDateTime) {
		if (currentDateTime) {
			if (currentDateTime.getDay() == 6) {
				this.setOptions({
					minTime : '11:00'
				});
			} else
				this.setOptions({
					minTime : '8:00'
				});
		}
	};
	$('#datetimepicker7').datetimepicker({
		onChangeDateTime : logic,
		onShow : logic
	});
	$('#datetimepicker8').datetimepicker({
		onGenerate : function(ct) {
			$(this).find('.xdsoft_date').toggleClass('xdsoft_disabled');
		},
		minDate : '-1970/01/2',
		maxDate : '+1970/01/2',
		timepicker : false
	});
	$('#datetimepicker9').datetimepicker(
			{
				onGenerate : function(ct) {
					$(this).find('.xdsoft_date.xdsoft_weekend').addClass(
							'xdsoft_disabled');
				},
				weekends : [ '01.01.2014', '02.01.2014', '03.01.2014',
						'04.01.2014', '05.01.2014', '06.01.2014' ],
				timepicker : false
			});

	$('#datetimepicker10').datetimepicker({
		step : 5,
		inline : true
	});

	$('#datetimepicker_start_time').datetimepicker({
		startDate : '+1970/05/01'
	});

	$('.form-control2').datetimepicker({
		startDate : '+1970/05/01'
	});

	$('#datetimepicker_unixtime').datetimepicker({
		format : 'unixtime'
	});
	$('#datetimepicker11').datetimepicker({
		hours12 : false,
		format : 'Y-z H:i W',
		step : 1,
		opened : false,
		validateOnBlur : false,
		closeOnDateSelect : false,
		closeOnTimeSelect : false
	});
</script>
</html>